<!--
 * @Author: zulezhe
 * @Date: 2021-01-21 11:23:30
 * @LastEditors: zulezhe
 * @LastEditTime: 2021-01-26 16:31:14
 * @Description: In User Settings Edit
 * @FilePath: \canvas\01-基本\08.绘制箭头.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }
      * {
        padding: 0;
        margin: 0;
      }
      #canvas-container {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="canvas-container"></div>
    <script>
      window.onload = () => {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        canvas.width = 1000;
        canvas.height = 800;
        document.getElementById("canvas-container").appendChild(canvas);
        drawArrow2(context, 800, 200, 300, 200, 30, 50, 10, "red");
        frawArrow(context, 10, 100, 300, 100, 100, 30);
      };
      function frawArrow(ctx, fromX, fromY, toX, toY, hypotenuse, angle) {
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = "red";
        ctx.lineWidth = 4;
        // 计算角度
        /**
         * Math.atnt(y,x);返回的是从x轴到(x,y)之间的弧度,rad=Math.PI/180*角度
         * 角度=(弧度*180)/Math.PI
         */
        // var jiaodu = Math.atan2((formY - toY, fromX - toX) * 180) / Math.PI;

        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        let p3 = {};
        let arrowX;
        let arrowY;
        /**
         * 计算p3点的x轴坐标,已知角度angle,斜边长hypotenuse,根据三角函数余弦函数可知
         * Math.cos(angle)=邻边x/斜边hypotenuse
         * 转换后 x=Math.cos(angle)*斜边hypotenuse
         * p3.x坐标为p3.x=p2.x-Math.cos(angle)*斜边hypotenuse
         */
        arrowX = toX - Math.cos(angle) * hypotenuse;
        /**
         * 计算p3点的y轴坐标,一直角度angle,斜边长hypotenuse,根据三角函数的正弦函数可知
         * Math.sin(angle)=对边y/斜边hypotenuse
         * 转换后 y=Math.sin(angle)*斜边hypotenuse
         * p3.y坐标为 p3.y=p2.y-Math.sin(angle)*斜边hypotenuse
         */
        arrowY = toY - Math.cos(angle) * hypotenuse;
        ctx.lineTo(arrowX, arrowY);
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - Math.cos(angle) * hypotenuse, toY + Math.cos(angle) * hypotenuse);

        ctx.stroke();
        ctx.restore();
      }
      /**
       * ctx：Canvas绘图环境
        fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
        toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组)
        theta：三角斜边一直线夹角
        headlen：三角斜边长度
        width：箭头线宽度
        color：箭头颜色
       *
       */
      function drawArrow2(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
        theta = typeof theta != "undefined" ? theta : 30;
        headlen = typeof theta != "undefined" ? headlen : 10;
        width = typeof width != "undefined" ? width : 1;
        color = typeof color != "color" ? color : "#000";

        // 计算各角度和对应的P2,P3坐标
        var angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI,
          angle1 = ((angle + theta) * Math.PI) / 180,
          angle2 = ((angle - theta) * Math.PI) / 180,
          topX = headlen * Math.cos(angle1),
          topY = headlen * Math.sin(angle1),
          botX = headlen * Math.cos(angle2),
          botY = headlen * Math.sin(angle2);
        ctx.save();
        ctx.beginPath();
        var arrowX = fromX - topX;
        var arrowY = fromY - topY;
        ctx.moveTo(arrowX, arrowY);
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        arrowX = toX + topX;
        arrowY = toY + topY;
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(toX, toY);
        arrowX = toX + botX;
        arrowY = toY + botY;
        ctx.lineTo(arrowX, arrowY);
        ctx.strokeStyle = color;
        ctx.lineWidth = width;
        ctx.stroke();
        ctx.restore();
      }
    </script>
  </body>
  <script src="./index.js"></script>
</html>
